<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="menu/swimbi.css" />
<link rel="stylesheet" href="position/tablePositionCandidate.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css">
<link rel="stylesheet" href="form/form.css" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>JT HR</title>

<style>
.forma {
	width: 50%;
	margin: 0 auto;
}

#comment-container {
	margin-top: 250px;
	min-width: 520px;
	border: 1px solid;	
}

#candidateForm .accept{
	background: url();
	width: 24px;
	height: 24px;
	border: none;
	margin-left: 5px;
}

#candidateForm .remove{
	background: url();
	width: 24px;
	height: 24px;
	border: none;
	margin-left: 5px;
}

#candidateForm .view{
	background: url();
	width: 24px;
	height: 24px;
	border: none;
	margin-left: 5px;
}

candidateTable {

}

.comment {
	margin-top: 10px;
    margin-left: auto;
	margin-right: auto;
	max-width: 500px;
	border: 3px solid #b5b5b5;
	background-color: #b5b5b5;
	padding-bottom: 5px;
}

.comment-username{
	padding: 10px;
	float: left;
	background-color: #b5b5b5;
}

.comment-buttons {
	padding: 10px;
	float: right;
	background-color: #b5b5b5;
}

.comment-text {
	padding: 10px;
	clear: both;
	min-height: 50px;
	background-color: white;
	margin-right: 5px;
	margin-left: 5px;
}

<!-- .submit-comment-button:hover {
	opacity: 0.7;
} -->

.delete {
	background: url();
	width: 13px;
	height: 16px;
	border: none;
	margin-left: 5px;
}

.delete:hover{
	opacity: 0.5;
}

.delete:active{
	opacity: 0.3;
}

.edit {
	background: url();
	width: 16px;
	height: 16px;
	border: none;
}

.edit:hover{
	opacity: 0.5;
}

.edit:active{
	opacity: 0.3;
}

#candidateForm .interview {
	background: url();
	width: 24px;
	height: 24px;
	border: none;
	margin-left: 5px;
}

#candidateForm .interview:hover {
	opacity: 0.5;
}

#candidateForm .interview:active{
	opacity: 0.3;
}
</style>
</head>
<body>
	<div id="main">
		<%@ include file="header.jsp"%>
		<%@ include file="menu.jsp"%>
		<div id="site_content">
			<div id="table_container">
				<div class="forma form">
						<table border="0">
						
<!-- 							<tr> -->
<!-- 								<td><label>Interviewers</label><font color="red"></font></td> -->
<%-- 								<td><input type="text" name="interviewers" value="${interviewers}" disabled></td> --%>
<!-- 							</tr> -->

							<tr>
								<td><label>Data</label><font color="red"></font></td>
								<td><input type="text" name="data" value="${data}" disabled></td>
							</tr>

							<tr>
								<td><label>Candidate</label></td>
								<td><input type="text" name="candidate" value="${candidate}" disabled></td>
							</tr>
							
							<tr>
								<td><label>Candidates</label></td>
								<td>
									<div id="candidateTable" class="datagrid">
										<table>
											<tr>
												<td>Interviewer Name</td>
												<td>Email</td>
												<td>Operations</td>
											</tr>
											
											<c:forEach items="${interviewers}" var="int">
												<tr>
													<td>${int.firstName} ${int.lastName}</td>
													<td>${int.email}</td>
													<td>
														<div id="candidateForm">											
															<form action="viewuser" method="POST">
																<input type="hidden" name="user_id" value="${int.id}" />
																<input type="submit" value="" name="viewCandidate" title="View" class="view" />
															</form>
														</div>				
													</td>
												</tr>
											</c:forEach>
										</table>
									</div>
								</td>
							</tr>
						</table>
				</div>
				
				<div id="comments-container">
					<c:forEach items="${comments}" var="comm">
						<div class="comment">
							<div class="comment-username">Posted by: ${comm.user.firstName} ${comm.user.lastName}</div>
							<form action="viewinterview" method="POST" id="comment__${comm.id}">
								<c:if test="${comm.user.id == user_id}"> <!-- userId should be obtained from session -->
									<div class="comment-buttons">
											<input type="hidden" name="cand_id" value="<c:out value="${cand_id}" />"/>
											<input type="hidden" name="comment_id" value="<c:out value="${comm.id}" />"/>
											<input type="hidden" name="inter_id" value="<c:out value="${inter_id}" />" />
											<input type="button" value="" class="edit" onclick="toggle_visibility('comment_${comm.id}')"/>
<!-- 											<input type="submit" value="" name="deleteComment" title="Delete" class="delete"/> -->
										
									</div>
								</c:if>
								<div class="comment-text">
									<textarea id="comment_${comm.id}_text" name="comment_text" form="comment__${comm.id}" rows="4" cols="65" readonly>${comm.text}</textarea><br>
									<input id="comment_${comm.id}_editbutton" type="submit" value="Submit" name="editComment" title="Edit" disabled/>
								</div>
							</form>
						</div>
					</c:forEach>
				</div>
			</div>
		</div>
	</div>
	
<script type="text/javascript">
function toggle_visibility(id) {
    var e = document.getElementById(id);
    document.getElementById(id + "_text").readOnly = false;
    document.getElementById(id + "_editbutton").disabled = false;
}
</script>
</body>
</html>


